<template>
  <div>
    <div class="flex-start m-b-10" v-show="showSearchFlag">
      <customer-type-select class="m-r-10" @change="customerTypeChange" />
      <el-input
        size="small"
        clearable
        style="width: 400px"
        v-model="search.queryWord"
        class="m-r-10"
        placeholder="请输入关键字"
      />
    </div>
    <!--    <div class="flex-center m-b-10">-->
    <!--      <div class="flex-center">-->
    <!--      </div>-->
    <!--      <div class="flex-center">-->
    <!--        <el-button icon="el-icon-refresh" circle @click="query" :loading="loading"></el-button>-->
    <!--        <el-button icon="el-icon-search" circle @click="showSearchFlag=!showSearchFlag"></el-button>-->
    <!--      </div>-->
    <!--    </div>-->
    <el-table
      class="my-table"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
      height="calc(100vh - 260px)"
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column label="微信头像" width="100" align="center">
        <template v-slot="scope">
          <el-avatar shape="square" :size="70" :src="scope.row.wxHeadimgUrl">
            <img
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="wxNickName"
        label="微信昵称"
        min-width="180"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.wxNickName | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userPhone"
        label="手机号码"
        min-width="200"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.userPhone | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userIdentity"
        label="客户身份"
        min-width="180"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.row.userIdentity | userIdentity }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间"
        min-width="100"
        align="center"
      />
      <el-table-column fixed="right" label="操作" align="center" width="100">
        <template v-slot="scope">
          <el-button
            v-if="permission['filling-team-list:detail']"
            @click.native.prevent="toDetail(scope.row)"
            type="text"
            size="small"
            icon="el-icon-view"
            >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      class="m-t-20"
      @change="query"
    />
    <div class="h-100px"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppPagination from "@/components/business/app-pagination";
import { getRecords, getTotal, isNull } from "@/util/common-util";
import CustomerTypeSelect from "@/components/business/customer-type-select";
import { getPage } from "@/api/business/customer-list";

export default {
  name: "customer-list-list",
  computed: {
    ...mapGetters(["permission"]),
  },
  components: { CustomerTypeSelect, AppPagination },
  data() {
    return {
      showSearchFlag: true,
      loading: false,
      data: [],
      total: 0,
      search: {
        queryWord: "",
        userIdentity: null,
      },
    };
  },
  filters: {
    userIdentity(v) {
      if (v === 1) return "车队成员";
      if (v === 0) return "普通车主";
      return "未知";
    },
  },
  mounted() {
    this.query();
  },
  methods: {
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage();
      }
      this.loading = true;
      getPage(_page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    customerTypeChange(v) {
      this.search.userIdentity = v;
      this.query();
    },
    toDetail(row) {
      this.$emit("detail", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
